<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="static/css/user.css">
</head>
<body>
    <p>用户管理页面</p>
    <table  id="tab">
        <tr>
            <th>ID</th>
            <th>头像</th>
            <th>用户名</th>
            <th>密码</th>
            <th>邮箱</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
    </table>

    <script>
        $(document).ready(function () {
           loaddata()
        })


        $('body').on('click','.del',function (event) {
            res = confirm("确定要封禁该账号吗？")
            if (res){
                user_state("封禁",this.parentNode.parentNode.getAttribute("data"))
            }
        })

        $('body').on('click','.ban',function (event) {
            res = confirm("确定要禁言该账号吗？")
            if(res){
                user_state("禁言",this.parentNode.parentNode.getAttribute("data"))
            }
        })

        $('body').on('click','.recover',function (event) {
            res = confirm("确定要恢复该账号吗？")
            if(res){
                user_state("正常",this.parentNode.parentNode.getAttribute("data"))
            }
        })

        // 账号状态操作
        function user_state(state,user_id) {
            $.ajax({
                url: "/user/state",
                type: "get",
                data:{
                    state : state,
                    user_id :user_id,
                },
                success: () => {
                    var ss = document.querySelector('[data="' + user_id + '"]').querySelector(".state");
                    ss.innerHTML = state
                }
            })
        }


        // 加载数据
        function loaddata() {
            $.ajax({
                url:"/user/all",
                type:"post",
                dataType:"json",
                success:function (data) {

                    for (const user of data.user){
                        const trTag = document.createElement("tr");
                        trTag.setAttribute("data", user.id);

                        const tdTag1 = document.createElement("td");
                        tdTag1.className = "";
                        tdTag1.textContent = user.id;

                        const tdTag2 = document.createElement("td");
                        tdTag2.className = "";
                        tdTag2.textContent = user.type;

                        const imgTag1 = document.createElement("img");
                        imgTag1.src = "";

                        tdTag2.appendChild(imgTag1)

                        const tdTag3 = document.createElement("td");
                        tdTag3.className = "";
                        tdTag3.textContent = user.name;

                        const tdTag4 = document.createElement("td");
                        tdTag4.className = "";
                        tdTag4.textContent = user.pwd;

                        const tdTag5 = document.createElement("td");
                        tdTag5.className = "";
                        tdTag5.textContent = user.email;

                        const tdTag6 = document.createElement("td");
                        tdTag6.className = "state";
                        tdTag6.textContent = user.state;

                        const tdTag7 = document.createElement("td");
                        tdTag7.className = "";
                        tdTag7.textContent = user.create_time;

                        const tdTag8 = document.createElement("td");
                        tdTag8.className = "center";

                        const butdTag1 = document.createElement("button");
                        butdTag1.className = "ban";
                        butdTag1.textContent = "禁言";

                        const butdTag2 = document.createElement("button");
                        butdTag2.className = "del";
                        butdTag2.textContent = "封号";

                        const butdTag3 = document.createElement("button");
                        butdTag3.className = "recover";
                        butdTag3.textContent = "恢复正常";

                        tdTag8.appendChild(butdTag1)
                        tdTag8.appendChild(butdTag2)
                        tdTag8.appendChild(butdTag3)

                        trTag.appendChild(tdTag1)
                        trTag.appendChild(tdTag2)
                        trTag.appendChild(tdTag3)
                        trTag.appendChild(tdTag4)
                        trTag.appendChild(tdTag5)
                        trTag.appendChild(tdTag6)
                        trTag.appendChild(tdTag7)
                        trTag.appendChild(tdTag8)

                        document.getElementById("tab").appendChild(trTag)

                    }

                },
                error:function () {
                    alert("数据加载失败！")
                },
            })


        }


    </script>
</body>
</html>